<template>
  <div id="wghlarge" class="wghMap">
    <!--头部-->
    <div class="topheader">
      <div class="head01">
        <div class="head01-1">
          <div class="head01-2" style="min-width: 470px;"><div class="appname">网格化管理</div><span class="split">|</span><span class="place">{{currentAreaName}}</span></div>
        </div>
        <div class="head01-3" v-if="userCode == 1">
            <div class="myselect" id="mySelect" @click="showTownSelector=!showTownSelector">
              <span>切换区域</span>
            </div>
          <transition :duration="500" enter-active-class="animated bounceInDown" leave-active-class="animated fadeOut">
            <div class="town-selector" v-show="showTownSelector">
              <div class="towns" v-for="(item, index) in towns" :key="index" :class="{active: item.active}" @click="handlerAreaChange(item, index)">{{item.spaceName}}</div>
            </div>
          </transition>
        </div>
        <div class="topbtns">
          <div class="head01-4" v-for="(item, index) in wglms" :key="index"
            :class="{active: item.active}" @click="handleRightOptions(index)">
            <span>{{item.name}}</span>
          </div>
        </div>
        <div class="backIcon" onclick="history.go(-1)"></div>
      </div>
    </div>
    <!--地图-->
    <div id="map-container" class="wghMap" ref="wghmap"></div>
    <div class="local-zb">
      <ul>
        <li v-for="(item, index) in wgTree" :key="index" @click="handlerWgTreeClick(item, index)" class="curpointer">{{item.name}}</li>
      </ul>
    </div>
    <div class="map-menu-oc">网格元素</div>
    <div class="map-menu">
      <div class="menu-options">
        <div class="item" v-for="(item, index) in mapMenuOptions" :key="index" :class="item.active ? 'active': ''" @click="handleMapOptions(index)">
          <div class="name">{{item.name}}</div>
        </div>
        <div class="item" :class="showMenuDetails == 6 ? 'active': ''" @click="handleMapOptions(5)">
          <div class="searchLogo"></div>
        </div>
      </div>
      <div class="menu-details">
        <div class="mp-body" v-if="showMenuDetails <=  5">
          <div v-for="(item, index) in mapMenuOptions[showMenuDetails - 1].childs" :key="index">
            <div>
              <div class="item" :class="{active: item.selected}">
                <div class="select" @click="handlerElementSeleted(mapMenuOptions[showMenuDetails - 1].childs, item)"></div>
                <img :src="item.icon" alt="">
                <span class="name">{{item.name}}</span>
                <span class="count">({{item.value}})</span>
              </div>
                <div v-if="item.children" class="animated" style="margin-left: 30px;">
                  <template v-for="(c, i) in item.children">
                    <div class="item" :class="{active: c.selected}" :key="'c' + i">
                      <div class="select" @click="handlerElementSeleted(mapMenuOptions[showMenuDetails - 1].childs, c, item)"></div>
                      <img :src="c.icon" alt="">
                      <span class="name">{{c.name}}</span>
                      <span class="count">({{c.value}})</span>
                    </div>
                  </template>
                </div>
            </div>
          </div>
        </div>
        <div class="map-body search6" v-show="showMenuDetails ==  6">
          <div class="searchInput">
            <input type="text" placeholder="请输入关键字">
          </div>
          <div class="btns">
            <div class="btn">重置</div>
            <div class="btn">搜索</div>
          </div>
          <div class="result">
            <div class="title">共搜索到 16 条结果</div>
            <div class="items">
              <div class="item" v-for="(item, index) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]" :key="index">
                <div class="left">
                  <div class="icon">{{item}}</div>
                </div>
                <div class="right">
                  <div class="t">内容</div>
                  <div class="text">{{currentAreaName}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="wg-info-bottom">
      <div class="item" v-for="(item, index) in bottomInfos" :key="index">
        <div class="top"><div class="count">{{item.count}}</div><div class="dw">{{item.dw}}</div></div>
        <div class="name">{{item.name}}</div>
      </div>
    </div> -->
    <div class="wg-info-right-top">
      <div class="item curpointer" @click="openInfoFrame('ExtXKItemReport', '待办事件', '/datav/view/list.jsp', true)">
        <div class="logo dbsj"></div>
        <div class="text"><div class="name">待办事件</div><div class="top"><div class="count">{{eventInfo.stat.待处理 | engNumberFmt}}</div><div class="dw">个</div></div></div>
      </div>
      <div class="item curpointer" @click="openInfoFrame('ExtXKItemReport', '处理中', '/datav/view/list.jsp', true)">
        <div class="logo clz"></div>
        <div class="text"><div class="name">处理中</div><div class="top"><div class="count">{{eventInfo.stat.处理中 | engNumberFmt}}</div><div class="dw">个</div></div></div>
      </div>
      <div class="item curpointer" @click="openInfoFrame('ExtXKItemReport', '已处理', '/datav/view/list.jsp', true)">
        <div class="logo ycl"></div>
        <div class="text"><div class="name">已处理</div><div class="top"><div class="count">{{eventInfo.stat.已处理 | engNumberFmt}}</div><div class="dw">个</div></div></div>
      </div>
      <div class="item curpointer" @click="openInfoFrame('ExtXKItemReport', '预警中', '/datav/view/list.jsp', true)">
        <div class="logo yjz"></div>
        <div class="text"><div class="name">预警中</div><div class="top"><div class="count">{{eventInfo.stat.预警中 | engNumberFmt}}</div><div class="dw">个</div></div></div>
      </div>
    </div>
    <div class="wg-info-right-bottom">
      <div class="head-tab">
        <div class="border">
          <div class="item" :class="eventType == 'ExtXKItemReport' && 'active'" @click="eventType = 'ExtXKItemReport'">实时动态</div>
          <div class="item" :class="eventType == 'ExtXKPeopleCondition' && 'active'" @click="eventType = 'ExtXKPeopleCondition'">民情走访</div>
        </div>
      </div>
      <div class="itemList">
        <marquee-scroll v-if="eventType == 'ExtXKItemReport' && eventInfo.list.length" :class-option="{step:0.2}" :data="$Util.filterUtil(eventInfo.list, 'ExtXKItemReport')" style="height:600px;overflow:hidden;" class="marquee-list">
          <div class="gd-item" v-for="(item, index) in $Util.filterUtil(eventInfo.list, 'ExtXKItemReport')" :key="index">
            <div class="titlebar">
              <img :src="item.img | productEnv" alt="">
              <div class="name twoline" @click="openInfoContent(item.type, item.id)">{{item.name}}</div>
            </div>
            <div class="len"><div>上报时间：{{item.date.slice(5, 16)}}</div><div>上报人：{{item.userId}}</div></div>
            <div class="len">
              <div v-if="item.finishDate">办理期限：{{item.finishDate.slice(5, 16)}}</div>
              <div v-if="item.itemType">事项类型：{{item.itemType}}</div>
            </div>
            <div class="len"><div v-if="item.status">当前状态：{{item.status}}</div></div>
          </div>
        </marquee-scroll>
        <marquee-scroll v-if="eventType == 'ExtXKPeopleCondition' && eventInfo.list.length" :class-option="{step:0.2}" :data="$Util.filterUtil(eventInfo.list, 'ExtXKPeopleCondition')" style="height:600px;overflow:hidden;" class="marquee-list">
        <!-- <marquee-scroll v-if="eventType == 'ExtXKPeopleCondition' && eventInfo.list.length" :duration="600" :interval="3000" :repeat="5" style="height:600px;" class="marquee-list" ref="eventInfoMarquee"> -->
          <div class="gd-item" v-for="(item, index) in $Util.filterUtil(eventInfo.list, 'ExtXKPeopleCondition')" :key="index">
            <div class="name" @click="openInfoContent(item.type, item.id)">{{item.name}}</div>
              <div class="len"><div>上报时间：{{item.date.slice(5, 16)}}</div><div>上报人：{{item.userId}}</div></div>
              <div class="len">
                <div v-if="item.finishDate">办理期限：{{item.finishDate.slice(5, 16)}}</div>
                <div v-if="item.itemType">事项类型：{{item.itemType}}</div>
                <div v-if="item.status">当前状态：{{item.status}}</div>
            </div>
          </div>
        </marquee-scroll>
      </div>
    </div>
    <transition-group :duration="500" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOut">
      <div id="wghfx_0" class="wghfx" v-show="wglms[0].active && showFxframe" style="overflow:hidden;" key="1">
        <!-- 网格化分析 -->
        <div class="maincp" v-if="wglms[0].active">
          <!-- <div class="item" style="height: 420px;width: 950px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/33.png" alt="">今日考勤</div>
            <div class="wghfx-jrkq" style="height: 375px;width: 950px;zoom:0.95;">
              <el-carousel class="left" :interval="3000">
                <el-carousel-item>
                  <div class="sjq"><BeautyBall :range="wghfxKqData.summary"/></div>
                  <div class="text">里程达标率</div>
                </el-carousel-item>
                <el-carousel-item>
                  <div class="sjq"><BeautyBall :range="wghfxKqData.summary2" :color="'#1c31d1'"/></div>
                  <div class="text">时长达标率</div>
                </el-carousel-item>
              </el-carousel>

              <div class="right">
                <div class="kq-group">
                  <div class="group-name">网格员</div>
                  <div class="group-items">
                    <div class="item" v-for="(item, index) in wghfxKqData.kq[0]" :key="index" >
                      <div class="item-name">{{item.name}}</div>
                      <StyleBar class="style-bar" :val="item.value" :sum="item.sum"/>
                      <div class="item-num curpointer" @click="openLayuiWindow('/datav/view/showWgInfoList.jsp', {type: wghfxKqData.types[index], person: 'wgy'})">{{item.value}} 人</div>
                    </div>
                  </div>
                </div>
                <div class="kq-group">
                  <div class="group-name">巡查员</div>
                  <div class="group-items">
                    <div class="item" v-for="(item, index) in wghfxKqData.kq[1]" :key="index" >
                      <div class="item-name">{{item.name}}</div>
                      <StyleBar class="style-bar" :val="item.value" :sum="item.sum"/>
                      <div class="item-num curpointer" @click="openLayuiWindow('/datav/view/showWgInfoList.jsp', {type: wghfxKqData.types[index], person: 'xcy'})">{{item.value}} 人</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
          <div class="item" style="height: 420px;width: 950px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/33.png" alt="">事件趋势量分析</div>
            <div id="wghfx-sjfx-sqlfx" style="height: 375px; width: 880px;">
            </div>
          </div>

          <div class="item" style="height: 420px;width: 880px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/34.png" alt="">年度网格事件上报统计</div>
            <div id="chart-wghfx-ndwgsjsbtj" style="height: 375px;width: 880px;"></div>
          </div>
          <div class="item" style="height: 420px;width: 900px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/35.png" alt="">上报事件滚动列表</div>
            <marquee v-if="wghfxJrsbsjgdlb.length" :duration="600" :interval="5000" class="sbsjtjList" style="height: 348px;width: 860px; margin-top: 20px; overflow: hidden;">
              <div class="gd-item" v-for="(item, index) in wghfxJrsbsjgdlb" :key="index">
                <div class="type">{{item.name}}</div>
                <div class="rp">
                  <div class="content" @click="openLayuiWindow('/datav/list/sj/eventView.jsp', {id: item.id});"><span class="date">{{item.date.slice(5, 16)}}</span>{{item.content}}</div>
                </div>
              </div>
            </marquee>
          </div>
          <div class="item" style="height: 420px;width: 440px;margin: 0 20px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/37.png" alt="">事项分类统计</div>
            <div id="chart-wghfx-sxfltj" style="height: 375px;width:630px;position:relative;zoom:0.8;margin-top:40px;">
                <div class="extra" style="" ref="sxfltjBlock">事项</div>
            </div>
          </div>
          <div class="item" style="height: 420px;width: 480px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/41.png" alt="">高发问题排行统计</div>
            <div class="gfwtpxtjList" style="height: 375px;width: 480px; margin-top: 20px;">
              <div class="item" v-for="(item, index) in wghfxGfwtphxt" :key="index">
                <el-tooltip class="item" effect="dark" placement="top-start">
                  <div slot="content" style="width: 200px;font-size: 20px;">{{item.name}}</div>
                  <div class="name" @click="openLayuiWindow('/datav/popover/gfwtph.jsp', {serialNumber: item.serialNumber})">{{item.name}}</div>
                </el-tooltip>
                <div class="val">{{item.value}}条</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="wghfx_1" class="wghfx" v-show="wglms[1].active && showFxframe" style="overflow:hidden;" key="2">
        <!-- 人口分析 -->
        <div class="maincp" v-if="wglms[1].active">
          <div class="item" style="height: 420px;width: 880px;" v-show="wglms[1].panelInfo.panelNo == 1">
            <div class="title-head"><img src="/static/imgs/wgh_s/34.png" alt="" @click="wglms[1].panelInfo.panelNo = 2">
              人口流动分析
              <div class="tab-change-bar">
                <div class="item" :class="{active: wglms[1].panelInfo.rkld == 1}" @click="wglms[1].panelInfo.rkld = 1">历年人口流动趋势</div>
                <div class="item" :class="{active: wglms[1].panelInfo.rkld == 2}" @click="wglms[1].panelInfo.rkld = 2">今年人口流动分析</div>
              </div>
            </div>
            <div style="height: 375px;width: 880px;" v-show="wglms[1].panelInfo.rkld == 2">
              <iframe :src="'static/hybirds/wgh_rkld.html?area=' + topSpaceName" frameborder="0" style="width: 100%; height:100%;"></iframe>
            </div>
            <div id="chart-rkfx-rkldfx" style="height: 375px;width: 880px;" v-show="wglms[1].panelInfo.rkld == 1">
            </div>
          </div>
          <div class="item" style="height: 420px;width: 880px;" v-show="wglms[1].panelInfo.panelNo == 2">
            <div class="title-head"><img src="/static/imgs/wgh_s/34.png" alt="" @click="wglms[1].panelInfo.panelNo = 1">人口自然增长趋势
            </div>
            <div id="chart-rkfx-rkzrzzqs" style="height: 375px;width: 880px;">
            </div>
          </div>
          <div class="item" style="height: 375px;width: 980px;position:relative;" v-show="wglms[1].panelInfo.panelNo == 1">
            <div class="title-head"><img src="/static/imgs/wgh_s/41.png" alt="">年龄段分析</div>
            <div id="chart-rkfx-nldfx" style="height: 375px;width: 650px;"></div>
            <div class="jiehun-info">
              <div class="item"><div class="x1">未婚比例</div><div class="x2">{{rmfxDataJhl[1] | percentFmt}}</div></div>
              <div class="item"><div class="x1">已婚未育</div><div class="x2">{{rmfxDataJhl[2] | percentFmt}}</div></div>
              <div class="item"><div class="x1">已婚已育</div><div class="x2">{{rmfxDataJhl[0] | percentFmt}}</div></div>
            </div>
          </div>
          <div class="item" style="height: 420px;width: 950px;overflow: hidden;" v-show="wglms[1].panelInfo.panelNo == 2">
            <div class="title-head"><img src="/static/imgs/wgh_s/35.png" alt="">教育</div>
            <div style="height: 375px;width: 610px; margin-top: 20px;float:left">
              <div class="jytable">
                <div class="table-head">
                  <div class="td _60" style="min-width: 240px;">年龄段</div>
                  <div class="td _60" style="min-width: 180px;">人数/人</div>
                  <div class="td" style="min-width: 190px;text-align: center;line-height: 42px;">教育资源/所<div class="flex"><div class="it">公立</div><div class="it">私立</div></div></div>
                </div>
                <div class="table-body">
                  <div class="len"><div class="it1">学前教育</div><div class="it2">{{rkfxJydata[0].人数}}</div><div class="it3">{{rkfxJydata[0].公立}}</div><div class="it3">{{rkfxJydata[0].私立}}</div></div>
                  <div class="len"><div class="it1">小学教育</div><div class="it2">{{rkfxJydata[1].人数}}</div><div class="it3">{{rkfxJydata[1].公立}}</div><div class="it3">{{rkfxJydata[1].私立}}</div></div>
                  <div class="len"><div class="it1">初中教育</div><div class="it2">{{rkfxJydata[2].人数}}</div><div class="it3">{{rkfxJydata[2].公立}}</div><div class="it3">{{rkfxJydata[2].私立}}</div></div>
                </div>
              </div>
            </div>
            <div id="chart-rkfx-jy" style="height: 375px;width: 300px;float:right;"></div>
          </div>
          <div class="item" style="height: 420px;width: 880px;" v-show="wglms[1].panelInfo.panelNo == 2">
            <!-- <div class="title-head"><img src="/static/imgs/wgh_s/35.png" alt="">人口老龄化趋势</div> -->
            <div class="title-head"><img src="/static/imgs/wgh_s/35.png" alt="">养老资源分析</div>
            <!-- <div class="llhqs-left" style="height:375px;width:320px;float:left;"></div> -->
            <div class="ylzyfx" style="height: 375px;width: 280px; float:left">
              <div class="title">养老资源总计</div>
              <div class="item _1" attr-title="养老院">
                <div class="cont">
                  <div class="num">{{dataYlzyFx[0]}}</div>
                  <div class="dw">家</div>
                </div>
              </div>
              <div class="item _2" attr-title="养老资源">
                <div class="cont" style="left:21px;">
                  <div class="num">{{dataYlzyFx[1]}}</div>
                  <div class="dw">床</div>
                </div>
              </div>
              <div class="title">今年新增养老资源</div>
              <div class="item _3" attr-title="养老院">
                <div class="cont">
                  <div class="num">{{dataYlzyFx[2]}}</div>
                  <div class="dw">家</div>
                </div>
              </div>
              <div class="item _4" attr-title="养老资源">
                <div class="cont" style="left:21px;">
                  <div class="num">{{dataYlzyFx[3]}}</div>
                  <div class="dw">床</div>
                </div>
              </div>
            </div>
            <div id="chart-rkfx-rkllhqs" style="height: 375px;width: 600px; margin-top: 20px;float:right"></div>
          </div>
          <div class="item" style="height: 420px;width: 880px;margin-top: 50px;" v-show="wglms[1].panelInfo.panelNo == 1">
            <div class="title-head"><img src="/static/imgs/wgh_s/35.png" alt="">重点人群分析</div>
            <div id="chart-rkfx-zdrqfx" style="height: 415px;width: 310px;margin-left: -60px;float:left">
            </div>
            <div id="chart-rkfx-zdrqndfx" style="height: 415px;width: 630px;float:right;margin-top: 25px;">
            </div>
          </div>
          <div class="item" style="height: 480px; width: 980px; margin-top: 50px; overflow: hidden;" v-show="wglms[1].panelInfo.panelNo == 1">
            <div class="title-head" style="margin-bottom: 26px;"><img src="/static/imgs/wgh_s/37.png" alt="">帮扶对象分析</div>
            <div id="chart-rkfx-bfdxfx" style="height: 415px;width: 300px;margin-left: -30px;margin-top: -30px;float:left;">
            </div>
            <div id="chart-rkfx-bfryndfx" style="height: 415px; width: 630px; float: right;">
            </div>
          </div>
          <div class="item" style="height: 420px;width: 950px;" v-show="wglms[1].panelInfo.panelNo == 2">
            <div class="title-head"><img src="/static/imgs/wgh_s/33.png" alt="">各村人口分析</div>
            <div id="chart-rkfx-wgfx" style="height: 375px;width: 950px;">
            </div>
          </div>
        </div>
      </div>

      <div id="wghfx_2" class="wghfx" v-show="wglms[2].active && showFxframe" style="overflow:hidden;" key="3">
        <!-- 舆情分析 -->
        <div class="maincp" v-if="wglms[2].active" style="overflow: hidden;">
          <div class="item" style="height: 420px;width: 880px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/33.png" alt="">月度趋势折线图</div>
            <div id="chart-yqfx-ydqszxt" style="height: 375px;width: 880px;"></div>
          </div>
          <div class="item" style="height: 420px;width: 910px;margin-left: 60px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/34.png" alt="">实时舆情工单列表信息</div>
            <div style="margin: 25px 0;">
              <marquee v-if="yqfxSSgdgllb.length" :duration="600" :interval="3000" style="height:300px;" class="ssgdgdList">
                <div class="gd-item" v-for="(item, index) in yqfxSSgdgllb" :key="index">
                  <div class="title" @click="openLayuiWindow('/datav/list/yq/eventView.jsp', {id: item.id});">{{item.name}}</div><div class="date">{{item.date.slice(0, 10)}}</div>
                </div>
              </marquee>
            </div>
          </div>
          <div class="item" style="height: 420px;width: 880px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/35.png" alt="">网格总体情况</div>
            <div id="chart-wqfx-wgztqk" style="height: 375px;width: 880px;">
            </div>
          </div>
          <div class="item" style="height: 420px;width: 880px;margin-left: 60px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/38.png" alt="">来源统计</div>
              <div id="chart-yqfx-lytj" style="height: 375px;width:880px;"></div>
          </div>
        </div>
      </div>

      <div id="wghfx_3" class="wghfx" v-show="wglms[3].active && showFxframe" style="overflow:hidden;" key="4">
        <!-- 12345 -->
        <div class="maincp" v-if="wglms[3].active">
          <div class="item" style="height: 420px;width: 880px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/33.png" alt="">网格总体情况分析</div>
            <div id="chart-12345-wgztfx" style="height: 375px;width: 880px;"></div>
          </div>
          <div class="item" style="height: 420px;width: 880px;margin-left:60px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/34.png" alt="">实时滚动工单列表</div>
            <div style="margin: 25px 0;">
              <marquee v-if="a2345SSgdgllb.length" :duration="600" :interval="3000" style="height:300px;" class="ssgdgdList">
                <div class="gd-item" v-for="(item, index) in a2345SSgdgllb" :key="index">
                  <div class="title" @click="openLayuiWindow('/datav/list/gd/eventView.jsp', {id: item.id});">{{item.name}}</div><div class="date">{{item.date.slice(0, 10)}}</div>
                </div>
              </marquee>
            </div>
          </div>
          <div class="item" style="height: 420px;width: 640px;">
            <div class="title-head"><img src="/static/imgs/wgh_s/35.png" alt="">类型统计</div>
            <div id="chart-12345-lxtj" style="height: 375px;width: 630px;">
            </div>
          </div>
          <div class="item" style="height: 420px;width: 880px;">
            <el-carousel class="left" :interval="5000" direction="vertical" arrow="never" height="450px" style="height:450px;">
              <el-carousel-item>
                <div class="title-head"><img src="/static/imgs/wgh_s/37.png" alt="">受理量趋势</div>
                <div id="chart-12345-sllqs" style="height: 375px;width:880px;"></div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="title-head"><img src="/static/imgs/wgh_s/38.png" alt="">受理情况统计表</div>
                <div id="chart-12345-jdxcg" style="height: 375px;width:880px;"></div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="item" style="height: 420px;width: 240px;margin-left: -40px;">
            <div class="title-head" style="margin-left: 40px;"><img src="/static/imgs/wgh_s/36.png" alt="">满意度</div>
            <div class="chart-12345-myd" id="chart-12345-myd" style="height: 375px;width: 480px;zoom:0.85;">
              <el-progress class="myd-process" type="circle" :stroke-width="10" :percentage="chart12345Myd" ref="chart12345Myd"></el-progress>
            </div>
          </div>
        </div>
      </div>
      <Jjyxfx id="wghfx_4" v-show="wglms[4].active && showFxframe" style="overflow:hidden;" key="5"/>
    </transition-group>
  </div>
</template>

<script>
  // import LwMapThing from './lwmap/thing/index';
  import LwMap84 from './lwmap/84/index';
  import LwMap from './lwmap/gaode/index';
  import BeautyBall from './component/BeautyBall/index';
  import Marquee from './component/vue-marquee';
  import G2 from './MyG2';
  import DataSet from '@antv/data-set';
  import StyleBar from './component/StyleBar';
  import MarqueeScroll from 'vue-seamless-scroll';
  import Jjyxfx from './Jjyxfx';
  const APIDATA = window.$APIDATA;
  var boundaryData = '';
  const layui = require('layui');
  var mapMenuOptionsMapper = {};
  export default {
    name: 'Login',
    components: { Marquee, BeautyBall, StyleBar, MarqueeScroll, Jjyxfx },
    data () {
      this.mapOption = {index: 0, type: 'parent', id: '1le3khhz2dojy'};
      var wglms = [
        { name: '事件分析', active: false, foo: 'initWghfx' },
        { name: '人口分析', active: false, foo: 'initRkfx', panelInfo: { panelNo: 1, rkld: 2 } },
        { name: '舆情分析', active: false, foo: 'initYqfx' },
        { name: '12345分析', active: false, foo: 'init12345' },
        { name: '经济运行分析', active: false, foo: 'initJjyxfx' }
      ];
      var mapMenuOptions = [
        {
          id: "ry",
          name: "人",
          api: 'api/yth/wgh/population.jsp',
          loaded: false,
          childs: []
        },
        {
          id: "cs",
          name: "地",
          api: 'api/yth/wgh/address.jsp',
          loaded: false,
          childs: []
        },
        {
          id: "sx",
          name: "事",
          api: 'api/yth/wgh/events.jsp',
          loaded: false,
          childs: []
        },
        {
          id: "bj",
          name: "物",
          api: 'api/yth/wgh/things.jsp',
          loaded: false,
          childs: []
        },
        {
          id: "zj",
          name: "组织",
          loaded: false,
          api: 'api/yth/wgh/organization.jsp',
          childs: []
        }
      ];
      var userId = this.$route.query.userId || this.$db.get('userId') || (process.env.NODE_ENV == 'development' ? '98acjf9ecn0h' : '');
      // userId = '5cydj8x66fvf'; // 镇级账号测试
      var spaceId = this.$route.query.spaceId || this.$db.get('spaceId') || '';
      return {
        userCode: 1,
        topSpaceName: '',
        userId: userId,
        spaceId: spaceId,
        towns: [],
        showFxframe: false,
        // bottomInfos: [
        //   {name: '今日事项', dw: '起', count: '20'},
        //   {name: '今日日程', dw: '公里', count: '54'},
        //   {name: '今日巡查', dw: '小时', count: '8'},
        //   {name: '网格总数', dw: '个', count: '15'},
        //   {name: '网格长', dw: '人', count: '8'},
        //   {name: '网格员', dw: '人', count: '15'}
        // ],
        rightBottomInfos: [],
        showTownSelector: false,
        eventType: 'ExtXKItemReport',
        eventInfo: {
          stat: {
            待处理: 0,
            处理中: 0,
            已处理: 0,
            预警中: 0
          },
          list: []
        },
        tjInfo: {
          xcy: 0,
          events: 0,
          hours: 0,
          dcy: 0,
          wgy: 0,
          wgz: 0,
          licheng: 0
        },
        wgTree: [
          {name: '', type: 'FeatureCollection'}
        ],
        girdInfo: {
          yzwy: {
            督查员: 0,
            联络员: 0,
            民警: 0,
            网格长: 0,
            网格员: 0,
            信息员: 0,
            巡查员: 0
          },
          company: {
            企业数: "0",
            从业人数: "0",
            台资企业: 0,
            侨企: 0,
            外资企业: 0,
            外贸企业: 0,
            参保人数: "0",
            裁减人员企业: 0,
            未及时支付工资: 0
          },
          person: {
            低保户: "0",
            人口数: "0",
            低保人数: "0",
            户数: 0,
            重点人员: "0",
            少数民族: "0",
            残疾人数: "0",
            社区矫正人员: "0",
            安置帮教人员: "0",
            易肇事肇祸精神病: "0",
            吸毒人员: "0"
          },
          dangjian: {
            党员数: "0",
            困难党员: "0",
            组织数: 0,
            党总支: 0,
            优秀党员: 0,
            流动党员: 0
          },
          shuili: {
            水闸数: 0,
            泵站数: 0
          },
          zongjiao: {
            合法: 0,
            未经批准: 0
          },
          tax: {
            企业: 0,
            个人工商户: 0
          },
          zhuanXiang_263: {
            部门工程: 0,
            自查自曝自改: 0,
            协调会办: 0,
            散乱污排查点: 0
          }
        },
        currentGirdNo: '',
        mapMenuOptions: mapMenuOptions,
        showMenuDetails: 1,
        wglms,
        activityLoading: false,
        wghfxKqData: {
          kq: [ [], [] ],
          summary: 0,
          summary2: 0
        },
        a2345SSgdgllb: [],
        chart12345Myd: 100,
        yqfxSSgdgllb: [],
        wghfxJrsbsjgdlb: [],
        wghfxGfwtphxt: [],
        rkfxJydata: JSON.parse('[{"年龄端":"学前","公立":8,"人数":3506,"男生":1832,"女生":1674,"私立":5},{"年龄端":"小学","公立":3,"人数":6257,"男生":3356,"女生":2901,"私立":0},{"年龄端":"中学","公立":3,"人数":2618,"男生":1465,"女生":1153,"私立":0}]'),
        rmfxDataJhl: [0, 0, 0],
        dataYlzyFx: [0, 0, 0, 0]
      };
    },
    methods: {
      handlerAreaChange: function (item, index) {
        var vm = this;
        vm.spaceId = item.spaceId;
        vm.$db.set('spaceId', item.spaceId);
        vm.showTownSelector = false;
        vm.$Util.toggleAttr(vm.towns, index);
        if (index || vm.userCode == 2) {
          vm.clearFeatures();
          vm.wgTree = vm.wgTree.slice(0, 1);
          var featureData = boundaryData.features.find((n) => n.properties.name == item.spaceName);
          vm.wgTree.push({
            name: featureData.properties.name,
            type: 'Feature',
            id: featureData.id,
            cp: featureData.properties.cp
          });
          vm.map.setCenterAndZoom(featureData.properties.cp, vm.$Config.ZOOM_2);
          if (featureData.features.length) {
            // 显示二级网格 （村里面的网格 临时网格）
            vm.addOuterPolygon(featureData.features);
            featureData.features.forEach(vm.addFeatureV2);
          } else {
            vm.map.removeFeature('Feature');
            vm.addOuterPolygon(featureData);
            vm.map.add3DBoundaryByFeatureV2(featureData, '#1ac9ff', 0.3, 1600, [3, 20], '', 'Terminal');
          }
          vm.currentGirdNo = featureData.id;
        } else {
          vm.wgTree = vm.wgTree.slice(0, 1);
          vm.currentGirdNo = '';
          vm.map.setCenterAndZoom(vm.$Config.WGH_MAP_CENTER, vm.$Config.WGH_MAP_ZOOM);
          vm.clearFeatures();
          vm.addFeatureV1();
        }
      },
      addOuterPolygon: function (data) {
        var vm = this;
        if (!vm.map.addOuterPolygon) {
          return;
        }
        if (data instanceof Array) {
          vm.map.addOuterPolygon(data);
        } else {
          vm.map.addOuterPolygon([data]);
        }
      },
      handleMapOptions: function (index) {
        var vm = this;
        if (index != 5) {
          vm.mapOption = {index: index, type: 'parent', id: vm.mapMenuOptions[index].id};
        }
        vm.map.clearActivities();
        if (index == 5) {
          vm.showMenuDetails = 6;
          vm.$Util.toggleAttr(vm.mapMenuOptions, () => false);
          return;
        }
        vm.$Util.toggleAttr(vm.mapMenuOptions, index);
        vm.showMenuDetails = index + 1;
        var mapMenuOption = vm.mapMenuOptions[index];
        if (!mapMenuOption.loaded) {
          vm.getAndLoad(mapMenuOption.name, mapMenuOption.api + '?' + vm.$Util.stringify({gridId: vm.currentGirdNo, spaceId: vm.spaceId, userId: vm.userId}), function (data) {
            mapMenuOption.loaded = true;
            mapMenuOption.childs = data.map(n => {
              var obj = {
                selected: false,
                name: n.name,
                icon: './static/imgs/map/' + n.icon,
                value: n.value,
                points: vm.getRandomPoints(n.value > 10 ? 10 : n.value)
              };
              if (n.children) {
                obj.children = n.children.map((c) => {
                  return {
                    selected: false,
                    name: c.name,
                    icon: './static/imgs/map/' + c.icon,
                    value: c.value,
                    points: vm.getRandomPoints(c.value > 10 ? 10 : c.value)
                  };
                });
              }
              return obj;
            });
            vm.addActivityIconsInMap();
          });
        } else {
          vm.addActivityIconsInMap();
        }
      },
      addActivityIconsInMap: function () {
        var vm = this;
        vm.mapMenuOptions[vm.mapOption.index].childs.forEach(child => {
          if (child.children) {
            child.children.forEach(child2 => {
              child2.points.forEach(point => {
                vm.map.addBreatheMarker(point.id, child2.icon,
                  point.cp, [26, 26], [13, 26], child.selected, function () {
                    var popoverHtml = `<div class="common-detail">${vm.$FU.obj2HtmlDom(
                      [
                        {"name": "姓名", "value": "缪蓉云"},
                        {"name": "出生日期", "value": "19920926"},
                        {"name": "居住地址", "value": vm.currentAreaName + "四房村2号独户"},
                        {"name": "户籍地址", "value": vm.currentAreaName + "四房村2号"}
                      ]
                    )}</div>`;
                    vm.map.showInfoWindow(popoverHtml, point.cp);
                  },
                  { lwType: 'activity', clz: child2.icon.replace(/(.*\/)*([^.]+).*/ig, "$2") }
                );
              });
            });
          } else {
            child.points.forEach(point => {
              vm.map.addBreatheMarker(point.id, child.icon,
                point.cp, [26, 26], [13, 26], child.selected, function () {
                  // vm.getAndLoad('', 'api/v3/wgh/getElementInfo.jsp?' + vm.$Util.stringify({
                  //   // id: ele.id,
                  //   // typeId: act.typeId,
                  //   type: child.name
                  // }), vm.showCommonPopover, point.cp, point.id);
                  var popoverHtml = `<div class="common-detail">${vm.$FU.obj2HtmlDom(
                    [
                      {"name": "姓名", "value": "缪蓉云"},
                      {"name": "出生日期", "value": "19920926"},
                      {"name": "居住地址", "value": vm.currentAreaName + "四房村2号独户"},
                      {"name": "户籍地址", "value": vm.currentAreaName + "四房村2号"}
                    ]
                  )}</div>`;
                  vm.map.showInfoWindow(popoverHtml, point.cp);
                },
                { lwType: 'activity', clz: child.icon.replace(/(.*\/)*([^.]+).*/ig, "$2") }
              );
            });
          }
        });
      },
      getRandomPoints: function (num) {
        // 通过中心点获取
        var vm = this;
        var wgTreeLength = vm.wgTree.length;
        var cp = '';
        var jd = 0;
        if (wgTreeLength > 1) {
          cp = vm.wgTree[wgTreeLength - 1].cp;
        } else {
          cp = vm.$Config.WGH_MAP_CENTER;
        }
        jd = 0.2 / Math.pow(5, wgTreeLength - 1);
        var result = [];
        for (var j = 0; j < num; j++) {
          var lng = cp[0] + (Math.random() - 0.5) * jd;
          var lat = cp[1] + (Math.random() - 0.5) * jd;
          result.push({
            cp: [lng, lat],
            id: vm.$Util.uuid()
          });
        }
        return result;
      },
      handlerElementSeleted: function (mapMenu, item, fatherItem) {
        item.selected = !item.selected;
        var vm = this;
        var typename = item.icon.replace(/(.*\/)*([^.]+).*/ig, "$2");
        var keys = Object.keys(vm.map.mapBox);
        var handlerType = [typename];
        if (item.children) {
          item.children.forEach(child => {
            child.selected = item.selected;
            handlerType.push(child.icon.replace(/(.*\/)*([^.]+).*/ig, "$2"));
          });
        }
        if (!item.selected) {
          keys.forEach(k => {
            var n = vm.map.mapBox[k];
            handlerType.includes(n.clz) && n.hide();
          });
        } else {
          keys.forEach(k => {
            var n = vm.map.mapBox[k];
            // n.show();
            // vm.map.setAnimation(n, 'BOUNCE', 900);
            handlerType.includes(n.clz) && (setTimeout(() => {
              item.selected && n.show();
              vm.map.setAnimation(n, 'BOUNCE', 900);
            }, Math.random() * 1500));
          });
        }
      },
      handleActivityItemClicked: function (item) {
        var vm = this;
        vm.mapOption = {type: 'child', id: item.id};
        vm.map.clearActivities();
        vm.addActivityIconsInMap();
      },
      handleActivityCountClicked: function (item) {
        if (item.click) {
          item.click();
        }
      },
      handleRightOptions: function (index) {
        // debugger
        var vm = this;
        vm.showFxframe = false;
        vm.map.closeInfoWindow();
        if (vm.wglms[index].active) {
          vm.wglms[index].active = false;
        } else {
          vm.$Util.toggleAttr(vm.wglms, index);
          vm.$nextTick(() => {
            vm.showFxframe = true;
            vm.$nextTick(() => {
              vm.$Util.toggleAttr(vm.wglms, index);
              vm[vm.wglms[index].foo]();
            });
          });
        }
      },

      handlerWgTreeClick (item, index) {
        var vm = this;
        if (vm.map && index == 0) {
          if (vm.userCode == 2) {
            return;
          }
          vm.handlerAreaChange(vm.towns[0], 0);
          // vm.map.setCenterAndZoom(vm.$Config.WGH_MAP_CENTER, vm.$Config.WGH_MAP_ZOOM);
          // vm.clearFeatures();
          // vm.addFeatureV1();
          vm.wgTree = vm.wgTree.slice(0, 1);
          vm.currentGirdNo = '';
        }
        if (index == 1) {
          vm.clearFeatures();
          vm.wgTree = vm.wgTree.slice(0, 1);
          var featureData = boundaryData.features.find((n) => n.id == item.id);
          vm.wgTree.push({
            name: featureData.properties.name,
            type: 'Feature',
            id: featureData.id,
            cp: featureData.properties.cp
          });
          vm.map.setCenterAndZoom(featureData.properties.cp, vm.$Config.ZOOM_2);
          if (featureData.features.length) {
            // 显示二级网格 （村里面的网格 临时网格）
            vm.addOuterPolygon(featureData.features);
            featureData.features.forEach(vm.addFeatureV2);
          } else {
            vm.clearFeatures();
            vm.addOuterPolygon(featureData);
            vm.map.add3DBoundaryByFeatureV2(featureData, '#1ac9ff', 0.3, 1600, [3, 20], '', 'Terminal');
          }
          vm.currentGirdNo = item.id;
        }
        if (vm.map && index == 2) {
          vm.map.setCenterAndZoom(item.cp, vm.$Config.ZOOM_3);
          vm.currentGirdNo = item.id;
          if (item.features && item.features.length) {
            vm.clearFeatures();
            vm.wgTree = vm.wgTree.slice(0, 3);
            vm.addOuterPolygon(item.features);
            item.features.forEach(vm.addFeatureV3);
          }
        }
        if (vm.map && index == 3) {
          vm.map.setCenterAndZoom(item.cp, vm.$Config.ZOOM_3 + 1);
          vm.currentGirdNo = item.id;
        }
      },
      openInfoContent: function (entityName, id, url = "/datav/view/viewContent.jsp") {
        var vm = this;
        var params = {
          entityName,
          id
        };
        window.layer.open({
          closeBtn: true,
          type: 2,
          title: false,
            shadeClose: false,
            shade: 0,
            skin: 'layerSkin',
            area: ['90%', '920px'],
            content: [process.env.API_URL + url + "?" + vm.$Util.stringify(params), 'no']
          }
        );
      },
      openInfoFrame: function (entityName, tagName, url = '/datav/view/elementList.jsp', withoutGrid = false) {
        var vm = this;
        var params = {
          gridId: withoutGrid ? '' : (vm.wgTree.length == 1 ? '' : vm.currentGirdNo),
          entityName,
          tagName
        };
        window.layer.open({
          closeBtn: true,
          type: 2,
          title: false,
            shadeClose: false,
            shade: 0,
            skin: 'layerSkin',
            area: ['90%', '920px'],
            content: [process.env.API_URL + url + "?" + vm.$Util.stringify(params), 'no']
          }
        );
      },
      openFrame: function (url) {
        window.layer.open({
          closeBtn: true,
          type: 2,
          title: false,
            shadeClose: false,
            shade: 0,
            skin: 'layerSkin',
            area: ['90%', '920px'],
            content: [process.env.API_URL + url, 'no']
          }
        );
      },
      // 统一请求加载方法
      getAndLoad: function (chartName, apiUrl, callback, ...params) {
        var vm = this;
        var keys = Object.keys(APIDATA);
        var key = '';
        keys.forEach(k => {
          if (apiUrl.includes(k)) {
            key = k;
          }
        });
        if (APIDATA[key]) {
          callback(APIDATA[key].data, params);
          return;
        }
        vm.$http((process.env.NODE_ENV == "production" ? '/' : '') + apiUrl).then(function (res) {
          if (res.data && res.data.code == 0) {
            callback(res.data.data, params);
          } else {
            vm.$notify.error({ title: '错误', message: `获取数据失败[${chartName}]` });
          }
        }, function () {
          vm.$notify.error({ title: '错误', message: `服务器未成果响应[${chartName}]` });
          vm.activityLoading = false;
        });
      },
      getAndLoad2: function (chartName, apiUrl, callback, ...params) {
        var vm = this;
        var host = '';
        if (location.hostname == 'localhost') {
          host = apiUrl.replace('getInfo', 'getInfoByJj');
        } else if (location.hostname == '221.228.70.15') {
          host = '/' + apiUrl.replace('getInfo', 'getInfoByJj');
        } else {
          host = '/' + apiUrl;
        }
        vm.$http(host).then(function (res) {
          if (res.data && res.data.code == 0) {
            callback(res.data.data, params);
          } else {
            // console.error(`获取数据失败[${chartName}]`);
            vm.$notify.error({ title: '错误', message: `获取数据失败[${chartName}]` });
          }
        }, function () {
          // console.error(`获取数据失败[${chartName}]`);
          vm.$notify.error({ title: '错误', message: `服务器未成果响应[${chartName}]` });
          this.activityLoading = false;
        });
      },
      // 网格信息数据
      initGridInfo: function (data) {
        this.girdInfo = data;
      },
      initActivityInfo: function (data, param) {
        var vm = this;
        vm.map.clearActivities();
        data.forEach((a) => {
          var indexArr = mapMenuOptionsMapper[a.alias];
          if (!indexArr) {
            return;
          }
          vm.mapMenuOptions[indexArr[0]].childs[indexArr[1]].count = a.count;
          // 插入地图标注
          vm.activities = data;
          param.showElements && vm.addActivityIconsInMap();
        });
        vm.activityLoading = false;
      },
      /*
      addActivityIconsInMap: function () {
        var vm = this;
        vm.map.removeObjByTypename('Histogram');
        var childIds = [];
        if (vm.mapOption.type == 'parent') {
          // 大类的所有
          childIds = vm.mapMenuOptions[vm.mapOption.index].childs.map((o) => o.id);
        } else {
          childIds = [vm.mapOption.id];
        }
        vm.activities.forEach(act => {
          if (childIds.includes(act.alias)) {
            vm.map.addMassMarker(act.typeId, act.list, '/static/imgs/map/' + act.alias + '.png', [26, 26], [13, 13], function (e) {
              var id = e.data.id;
              vm.getAndLoad(act.typeName, 'api/v1/wgh/getElementInfo.jsp?' + vm.$Util.stringify({
                id: id,
                typeId: act.typeId,
                type: act.typeName
              }), vm.showCommonPopover, e.data.lnglat, id);
            });
            // act.list.forEach(ele => {
            //   vm.map.addMarker(ele.id, '/static/imgs/map/' + act.alias + '.png',
            //     ele.position, [26, 26], [13, 26], function () {
            //       vm.getAndLoad(act.typeName, 'api/v1/wgh/getElementInfo.jsp?' + vm.$Util.stringify({
            //         id: ele.id,
            //         typeId: act.typeId,
            //         type: act.typeName
            //       }), vm.showCommonPopover, ele.position, ele.id);
            //     },
            //     { type: 'activity', clz: act.typeId }
            //   );
            // });
          }
        });
      },
      */
      showCommonPopover: function (data, params) {
        var popoverHtml = `<div class="common-detail">${this.$FU.obj2HtmlDom(data)}</div>`;
        this.map.showInfoWindow(popoverHtml, params[0]);
      },
      // 网格化分析
      initWghfx: function () {
        // this.getAndLoad('今日考勤', 'api/v3/wgh/dutyStat.jsp', this.initWghfxJrkq);
        this.getAndLoad('事件趋势量分析', 'api/v3/wgh/12345/monthStat.jsp', this.initChartSjfxQslfx);
        this.getAndLoad('年度网格事件上报统计', 'api/v3/wgh/event/mapStat.jsp', this.initChartWghfxNdwgsjsbtj);
        this.getAndLoad('上报事件滚动列表', 'api/v3/wgh/event/list.jsp', this.initWghfxJrsbsjgdlb);
        this.getAndLoad('事项分类统计', 'api/v3/wgh/event/typeStat.jsp', this.initChartWghfxSxfltj);
        this.getAndLoad('高发问题排行统计', 'api/v3/wgh/event/hotStat.jsp', this.initWghfxGfwtphtj);
      },
      initWghfxJrkq: function (data) {
        this.wghfxKqData = {
          summary: data[2].value,
          summary2: data[3].value,
          kq: data.slice(0, 2),
          types: ['dk', 'cx', 'lc']
        };
      },
      initChartSjfxQslfx: function (sourceData) {
        var data = JSON.parse(JSON.stringify(sourceData));
        var vm = this;
        this.$FU.refineMonth(data, true);
        var chart = new G2.Chart({
          container: 'wghfx-sjfx-sqlfx',
          width: 880,
          height: 375,
          padding: [40, 30, 70, 70]
        });
        chart.source(data);
        chart.scale('value', { alias: '数量', tickInterval: 40 });
        chart.axis('name', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#3e4b75'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('value', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#3d4a73'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#3d4a73',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.interval().position('name*value').opacity(1).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        }).label('value', {
          textStyle: {
            fill: '#c5a014',
            fontSize: 26
          }
        });
        chart.line().position('name*value').style('value', {
          stroke: '#ebe008'
        }).tooltip(false);
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var param = {
              year: '20' + origin.year,
              month: origin.month,
              ptitle: '12345分析-受理量趋势'
            };
            vm.openLayuiWindow('/datav/list/gd/index.jsp', param);
          }
        });
        chart.render();
      },
      initChartWghfxNdwgsjsbtj: function (data) {
        var chart = new G2.Chart({
          container: 'chart-wghfx-ndwgsjsbtj',
          width: 880,
          height: 375,
          padding: [0, 10, 150, 10]
        });
        chart.source(data);
        var maxValue = Math.max.apply(null, data.map(n => n.value));
        chart.scale('value', { alias: '事件数', tickInterval: 20 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 18,
              lineHeight: 18,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.axis('value', false);
        chart.interval().position('name*value').size(30).opacity(1).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        }).label('value', function (v) {
          let highValue = v / maxValue > 0.95;
          return highValue ? {
            offset: -15,
            textStyle: {
              fill: '#f00',
              fontSize: 16
            }
          } : {
            offset: 10,
            textStyle: {
              fill: '#fff',
              fontSize: 16
            }
          };
        });
        var vm = this;
        chart.on('interval:click', ev => {
          vm.openLayuiWindow('/datav/popover/ndsjSbList.jsp', {ptitle: '年度网格事件上报', deptId: ev.data._origin.deptId});
        });
        chart.render();
        // chart.$lwData = data;
        // setInterval(function () {
        //   // 随机排序一下
        //   var newData = chart.$lwData.slice(1).concat(chart.$lwData[0]);
        //   chart.$lwData = newData;
        //   chart.changeData(newData);
        // }, 5000);
      },
      initWghfxJrsbsjgdlb: function (data) {
        var vm = this;
        data.forEach(n => {
          n.date = vm.$Util.getFmtDate(new Date());
        });
        this.wghfxJrsbsjgdlb = data;
      },
      initChartWghfxSxfltj: function (data) {
        var vm = this;
        this.$FU.calcPercent(data);
        var chart = new G2.Chart({
          container: 'chart-wghfx-sxfltj',
          width: 630,
          height: 375,
          padding: [10, 300, 10, 10]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 1,
          innerRadius: 0.65
        });
        chart.intervalStack().position('value').color('name', G2.LW_CONSTANCE.COLOR_PIE);
        chart.tooltip(true, {
          showTitle: false
        });
        data.forEach((element, index) => {
          chart.guide().html({
            position: ['139%', (index + 1) * 10 - 3 + '%'],
            html: `<div class="libar-extra" onclick="openFrame('${process.env.PRODUCT_URL}/datav/popover/sxfltj.jsp?itemType=${element.itemType}&ptitle=事项分类统计')" style="background:${G2.LW_CONSTANCE.COLOR_PIE[index]};">${element.name} ${element.percent}<div class="liba" style="color:${G2.LW_CONSTANCE.COLOR_PIE[index]};">◆</div></div>`,
            zIndex: 0
          });
        });
        chart.legend(false);
        chart.render();
        chart.$lyData = data;
        chart.$lyIndex = 0;
        vm.$chartInterval1 = setInterval(function () {
          if (!vm.wglms[0].active) {
            clearInterval(vm.$chartInterval1);
            return;
          }
          var data = chart.$lyData[chart.$lyIndex];
          if (data) {
            chart.$lyIndex++;
          } else {
            chart.$lyIndex = 0;
            data = chart.$lyData[0];
          }
          vm.$refs.sxfltjBlock && (vm.$refs.sxfltjBlock.innerHTML = `<span style="color:${G2.LW_CONSTANCE.COLOR_PIE[chart.$lyIndex]}">${data.name} <br> ${data.value}</span>`);
        }, 5000);
      },
      initWghfxGfwtphtj: function (data) {
        this.wghfxGfwtphxt = data.slice(0, 6);
      },
      // 人口分析方法
      initRkfx: function () {
        var vm = this;
        vm.getAndLoad('人口分析', 'api/v3/wgh/person/stat.jsp', function (data) {
          vm.initChartRkfxWgfx(data.grid);
          vm.initChartRkfxZdrxfx(data.focus);
          vm.initChartRkfxBfdxfx(data.help);
          vm.initChartRkfxNldfx(data.year);
        });
        vm.getAndLoad('人口流动分析', 'api/v3/wgh/person/rkld/getNdZy.jsp', vm.initChartRkfxRkldfx);
        vm.getAndLoad('重点人群年度分析', 'api/v3/wgh/person/zdrq/getNdZy.jsp', vm.initChartRkfxZdrqndfx);
        vm.getAndLoad('帮扶人员年度分析', 'api/v3/wgh/person/bfdx/getNdZy.jsp', vm.initChartRkfxBfryndfx);
        vm.getAndLoad('人口自然增长趋势', 'api/v3/wgh/person/rkzz/getNdZy.jsp', vm.initChartRkfxRkzrzzqs);
        vm.getAndLoad('教育分析', 'api/v3/wgh/person/jy/getNdZy.jsp', vm.initChartJyAndJytable);
        vm.getAndLoad('养老资源', 'api/v3/wgh/person/ylzy/getNdZy.jsp', vm.initChartRkfxYlzy);
        vm.getAndLoad('结婚率', 'api/v3/wgh/person/yhyu/getYhyu.jsp', vm.initRkDataJhl);
      },
      initChartRkfxWgfx: function (data) {
        var chart = new G2.Chart({
          container: 'chart-rkfx-wgfx',
          width: 880,
          height: 375,
          padding: [0, 10, 150, 10]
        });
        chart.source(data);
        chart.scale('value', { alias: '人数', tickInterval: 20 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.axis('value', false);
        chart.interval().position('name*value').size(35).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        });
        chart.render();
      },
      initChartRkfxRkldfx: function (sourceData) {
        var data = [];
        var view1Data = [];
        sourceData.forEach(n => {
          data.push({ name: '男', type: n.年份, value: n['男'] });
          data.push({ name: '女', type: n.年份, value: n['女'] });
          view1Data.push({ name: '人口数', type: n.年份, value: n['人口数'] });
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-rkldfx',
          forceFit: true,
          height: 375,
          width: 880,
          padding: [50, 30, 80, 80]
        });
        var view1 = chart.view();
        var view2 = chart.view({
          start: {
            x: 0,
            y: 0.5
          }, // 视图绘图区域的起始点，x、y 数值在 0 - 1 范围内
          end: {
            x: 1,
            y: 1
          } // 视图绘图区域的结束点，x、y 数值在 0 - 1 范围内
        });
        view1.source(view1Data);
        view1.axis('value', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 18,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#3d4a73',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        view1.axis('type', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        view2.axis('value', false);
        view2.axis('type', false);
        view1.line().position('type*value').color('name', ['#20a0ff']).size(4).shape('smooth').style({
          stroke: '#fff',
          lineWidth: 1
        });
        view1.point().position('type*value').color('name').size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        // chart.legend('name', {
        //   useHtml: true,
        //   position: 'top', // 设置图例的显示位置
        //   itemGap: 10, // 图例项之间的间距
        //   containerTpl: '<div id="rkfx-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        // });
        chart.legend({
          position: 'top',
          itemGap: 20,
          textStyle: {
            fill: '#ffffff',
            fontSize: 16,
            textBaseline: 'top'
          }
        });
        view2.source(data);
        view2.interval().position('type*value').size(24).color('name', ['#6ab5e0', '#d088d5']).opacity(1).adjust([{
          type: 'dodge',
          marginRatio: 0.0001
        }]).label('value', {
          textStyle: {
            fill: '#fff',
            fontSize: 18
          },
          formatter: (v) => {
            return v;
          }
        }).tooltip();
        chart.render();
      },
      initChartRkfxZdrxfx: function (data) {
        var chart = new G2.Chart({
          container: 'chart-rkfx-zdrqfx',
          width: 360,
          height: 415,
          padding: [20, 0, 160, 0]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.95,
          innerRadius: 0.7
        });
        chart.intervalStack().position('value').color('name', ['#EC6F5D', '#3DB9B9', '#F6A636', '#DA563D']).shape('sliceShape').label('value', val => {
          return {
            offset: -5,
            textStyle: {
              fill: 'white',
              fontSize: 12,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)'
            }
          };
        });
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend('name', {
          position: 'right',
          useHtml: true,
          containerTpl: '<div id="mybottom-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.render();
      },
      initChartRkfxBfdxfx: function (data) {
        var chart = new G2.Chart({
          container: 'chart-rkfx-bfdxfx',
          width: 360,
          height: 415,
          padding: [20, 0, 160, 0]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.95,
          innerRadius: 0.7
        });
        chart.intervalStack().position('value').color('name', ['#EC6F5D', '#3DB9B9', '#F6A636', '#DA563D']).label('value', val => {
          return {
            offset: -5,
            textStyle: {
              fill: 'white',
              fontSize: 12,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)'
            }
          };
        });
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend('name', {
          position: 'right',
          useHtml: true,
          containerTpl: '<div id="mybottom-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.render();
      },
      initChartRkfxNldfx: function (sourceData) {
        var vm = this;
        var data = [];
        sourceData.forEach(n => {
          data.push({ name: '男', type: n.name, value: n['男'] + 50 });
          data.push({ name: '女', type: n.name, value: n['女'] + 50 });
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-nldfx',
          forceFit: true,
          height: 375,
          width: 650,
          padding: [20, 10, 0, 180]
        });
        chart.axis('value', false);
        chart.axis('type', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'middle'
            }
          },
          tickLine: false
        });
        chart.coord().transpose();
        chart.legend('name', {
          useHtml: true,
          position: 'top', // 设置图例的显示位置
          itemGap: 10, // 图例项之间的间距
          containerTpl: '<div id="rkfx-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.source(data);
        chart.interval().position('type*value').size(14).color('name', ['#6ab5e0', '#d088d5']).opacity(1).adjust([{
          type: 'dodge',
          marginRatio: 1 / 6
        }]).label('value', {
          textStyle: {
            fill: '#fff',
            fontSize: 18
          },
          formatter: (v) => {
            return v - 50;
          }
        }).tooltip('type*value', (type, value) => {
          return {
            item: type,
            value: value - 50
          };
        });
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0] && ele[0]._origin.type == '百岁老人') {
            vm.handleActivityItemClicked(vm.mapMenuOptions[0].childs[0].child[2]);
          }
        });
        chart.render();
      },
      initChartRkfxZdrqndfx: function (sourceData) {
        var fields = Object.keys(sourceData); // ['社区矫正', '肇事肇祸精神', ...]
        var years = sourceData[fields[0]].map(n => n['年份']); // ['2016, 2017', ...]
        var data = [];
        years.forEach((y, i) => {
          let o = { year: y };
          fields.forEach(f => {
            o[f] = sourceData[f][i]['人数'];
          });
          data.push(o);
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: fields,
          key: 'type',
          value: 'renshu'
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-zdrqndfx',
          width: 630,
          height: 375,
          padding: [20, 30, 50, 60]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('renshu', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 1,
              stroke: '#59ceec',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend(false);
        chart.line().position('year*renshu').color('type', ['#EC6F5D', '#3DB9B9', '#F6A636', '#DA563D']).size(3);
        chart.point().position('year*renshu').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initChartRkfxBfryndfx: function (sourceData) {
        var keys = Object.keys(sourceData['扶贫结对'][0]).filter(n => n != '年份' && n != '人数');
        var data = [];
        sourceData['扶贫结对'].forEach((n) => {
          let d = {year: n['年份']};
          keys.forEach(k => {
            d[k] = n[k];
          });
          data.push(d);
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: keys,
          key: 'type',
          value: 'renshu'
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-bfryndfx',
          width: 630,
          height: 375,
          padding: [20, 30, 50, 60]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('renshu', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 1,
              stroke: '#59ceec',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend(false);
        chart.line().position('year*renshu').color('type', ['#EC6F5D', '#3DB9B9', '#F6A636', '#DA563D']).size(3);
        chart.point().position('year*renshu').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initChartRkfxRkzrzzqs: function (sourceData) {
        var keys = ['出生率', '死亡率', '自然增长率'];
        var data = [];
        sourceData.forEach((n) => {
          let d = {year: n['年份'] + '年'};
          let birth = n['出生人数'] / 172498 * 1000;
          let death = n['死亡人数'] / 172498 * 1000;
          d['出生率'] = Number(birth.toFixed(2));
          d['死亡率'] = Number(death.toFixed(2));
          d['自然增长率'] = Number((birth - death).toFixed(2));
          data.push(d);
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: keys,
          key: 'type',
          value: 'renshu'
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-rkzrzzqs',
          width: 880,
          height: 375,
          padding: [80, 50, 50, 50]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('renshu', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 1,
              stroke: '#59ceec',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('year*renshu').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(3).shape('smooth').tooltip('type*renshu', (type, renshu) => {
          return {
            name: type,
            value: renshu + '‰'
          };
        });
        chart.point().position('year*renshu').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initChartJyAndJytable: function (sourceData) {
        this.rkfxJydata = sourceData;
        var chart = new G2.Chart({
          container: 'chart-rkfx-jy',
          width: 300,
          height: 375,
          padding: [30, 30, 30, 30]
        });
        var data1 = [{name: '男生', value: sourceData[0]['男生']}, {name: '女生', value: sourceData[0]['女生']}];
        var data2 = [{name: '男生', value: sourceData[1]['男生']}, {name: '女生', value: sourceData[1]['女生']}];
        var data3 = [{name: '男生', value: sourceData[2]['男生']}, {name: '女生', value: sourceData[2]['女生']}];
        var view1 = chart.view({ start: {x: 0.1, y: 0}, end: { x: 0.9, y: 0.5 } });
        view1.source(data1);
        view1.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        view1.intervalStack().position('value').color('name', ['#39a1fd', '#f2637b']).shape('sliceShape');
        view1.guide().html({position: [0.5, 0.5], html: '<div class="guide_1">幼儿园</div>'});

        var view2 = chart.view({ start: {x: 0, y: 0.5}, end: { x: 0.48, y: 1 } });
        view2.source(data2);
        view2.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        view2.intervalStack().position('value').color('name', ['#39a1fd', '#f2637b']).shape('sliceShape');
        view2.guide().html({position: ['50%', '50%'], html: '<div class="guide_2">小学</div>'});

        var view3 = chart.view({ start: {x: 0.52, y: 0.5}, end: { x: 1, y: 1 } });
        view3.source(data3);
        view3.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        view3.intervalStack().position('value').color('name', ['#39a1fd', '#f2637b']).shape('sliceShape');
        view3.guide().html({position: ['50%', '50%'], html: '<div class="guide_2">初中</div>'});
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend(false);
        chart.render();
      },
      initChartRkfxYlzy: function (data) {
        var sourceData = [];
        data.forEach((n) => {
          sourceData.push(
            {name: '床位数量', year: n['年份'] + '年', value: n['床位数量']}
          );
          sourceData.push(
            {name: '老人数量', year: n['年份'] + '年', value: n['老人数量']}
          );
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-rkllhqs',
          width: 600,
          height: 375,
          forceFit: true,
          padding: [20, 40, 80, 80]
        });
        chart.source(sourceData, {
          year: {
            range: [ 0, 1 ]
          }
        });
        chart.tooltip({
          crosshairs: {
            type: 'line'
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#0e5c9e'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#0e5c9e',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.axis('value', {
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          grid: {
            lineStyle: {
            lineWidth: 2,
            stroke: '#0e5c9e',
            lineDash: [1, 0]
            }
          }
        });
        chart.legend(false);
        // ['l(90) 0:#18ebe0 1:#0584ef', 'l(90) 0:#5534d4 1:#00ff00']#9877f6   #6ff6fb
        chart.area().position('year*value').color('name', ['#9877f6', '#6ff6fb']).opacity(0.8);
        chart.line().position('year*value').color('name', ['#9877f6', '#6ff6fb']).opacity(1).size(1);
        chart.render();

        var currentYearData = data[data.length - 1];
        var lastYearData = data[data.length - 2];
        this.dataYlzyFx = [currentYearData['养老院数量'], currentYearData['床位数量'], currentYearData['养老院数量'] - lastYearData['养老院数量'], currentYearData['床位数量'] - lastYearData['床位数量']];
      },
      initRkDataJhl: function (data) {
        var years = Object.keys(data);
        var currentYear = years.pop();
        var dat = data[currentYear];
        var d1 = parseInt(dat['育龄妇女人数']);
        var d2 = parseInt(dat['已婚育龄妇女人数']);
        var d3 = parseInt(dat['未婚育龄妇女人数']);
        var sum = d1 + d2 + d3;
        this.rmfxDataJhl = [d1 / sum, d2 / sum, d3 / sum];
      },
      // 12345分析方法
      init12345: function () {
        this.getAndLoad('网格总体情况分析', 'api/v3/wgh/12345/mapStat.jsp', this.initChart12345Wgztqkfx);
        this.getAndLoad('实时滚动工单列表', 'api/v3/wgh/12345/list.jsp', this.init12345SSgdgllb);
        this.getAndLoad('类型统计', 'api/v3/wgh/12345/typeStat.jsp', this.initChart12345Lxtj);
        this.getAndLoad('受理量趋势', 'api/v3/wgh/12345/monthStat.jsp', this.initChart12345Sllqs);
        this.getAndLoad('满意度', 'api/v3/wgh/12345/mydStat.jsp', this.initChart12345Myd);
        this.initChart12345Jdxcg();
      },
      initChart12345Wgztqkfx: function (data) {
        var vm = this;
        var chart = new G2.Chart({
          container: 'chart-12345-wgztfx',
          width: 880,
          height: 375,
          padding: [0, 10, 150, 10]
        });
        chart.source(data);
        chart.scale('value', { alias: '事件', tickInterval: 20 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 18,
              lineHeight: 18,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        var maxValue = Math.max.apply(null, data.map(n => n.value));
        chart.axis('value', false);
        chart.interval().position('name*value').size(35).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        }).label('value', function (v) {
          let highValue = v / maxValue > 0.95;
          return highValue ? {
            offset: -20,
            textStyle: {
              fill: '#f00',
              fontSize: 16
            }
          } : {
            offset: 10,
            textStyle: {
              fill: '#fff',
              fontSize: 16
            }
          };
        });
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var id = ele[0]._origin.id;
            vm.openLayuiWindow('/datav/list/gd/index.jsp', {gridId: id, ptitle: '12345分析-网格总体情况'});
          }
        });
        chart.render();
      },
      init12345SSgdgllb: function (data) {
        var vm = this;
        data.forEach(n => {
          n.date = vm.$Util.getFmtDate(new Date());
        });
        this.a2345SSgdgllb = data;
      },
      initChart12345Lxtj: function (data) {
        var chart = new G2.Chart({
          container: 'chart-12345-lxtj',
          width: 630,
          height: 375,
          padding: [50, 300, 50, 10]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        chart.intervalStack().position('value').color('name').shape('sliceShape');
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend('name', {
          position: 'left',
          useHtml: true,
          containerTpl: '<div id="myleft-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        var vm = this;
        chart.on('interval:click', ev => {
          if (ev && ev.data) {
            var id = ev.data._origin.id;
            vm.openLayuiWindow('/datav/list/gd/index.jsp', {menuid: id, ptitle: '12345分析-类型统计'});
          }
        });
        chart.render();
      },
      initChart12345Sllqs: function (sourceData) {
        var data = JSON.parse(JSON.stringify(sourceData));
        var vm = this;
        this.$FU.refineMonth(data, true);
        var chart = new G2.Chart({
          container: 'chart-12345-sllqs',
          width: 880,
          height: 375,
          padding: [40, 30, 70, 70]
        });
        chart.source(data);
        chart.scale('value', { alias: '数量', tickInterval: 40 });
        chart.axis('name', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#3e4b75'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('value', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#3d4a73'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#3d4a73',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.interval().position('name*value').opacity(1).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        }).label('value', {
          textStyle: {
            fill: '#c5a014',
            fontSize: 26
          }
        });
        chart.line().position('name*value').style('value', {
          stroke: '#ebe008'
        }).tooltip(false);
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var param = {
              year: '20' + origin.year,
              month: origin.month,
              ptitle: '12345分析-受理量趋势'
            };
            vm.openLayuiWindow('/datav/list/gd/index.jsp', param);
          }
        });
        chart.render();
      },
      initChart12345Jdxcg: function () {
        var sourceData = [{
          year: '2015',
          求助: 809,
          投诉: 667
        }, {
          year: '2016',
          求助: 1183,
          投诉: 673
        }, {
          year: '2017',
          求助: 2012,
          投诉: 235
        }, {
          year: '2018',
          求助: 2881,
          投诉: 166
        }];
        var data = sourceData.map((n) => {
          return {
            year: n.year,
            求助: n['求助'],
            投诉: n['投诉']
          };
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: ['求助', '投诉'],
          key: 'type',
          value: 'chanzhi'
        });
        var chart = new G2.Chart({
          container: 'chart-12345-jdxcg',
          width: 880,
          height: 375,
          padding: [60, 30, 70, 90]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('chanzhi', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#59ceec',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']);
        chart.point().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initChart12345Myd: function (data) {
        this.chart12345Myd = parseFloat(data.value);
      },
      // 舆情分析方法
      initYqfx: function () {
        this.getAndLoad('月度趋势折线图', 'api/v3/wgh/yuqing/monthStat.jsp', this.initChartYqfxYdqszxt);
        this.getAndLoad('实时舆情工单列表信息', 'api/v3/wgh/yuqing/list.jsp', this.initYqfxSsgdgdlb);
        this.getAndLoad('网格总体情况', 'api/v3/wgh/yuqing/mapStat.jsp', this.initChartYqfxWgztqk);
        this.getAndLoad('来源统计', 'api/v3/wgh/yuqing/sourceStat.jsp', this.initChartYqfxLytj);
        // this.getAndLoad('舆情', `api/yth/wgh/yuqing.jsp?userId=${this.userId}&spaceId=${this.spaceId}`, (data) => {
        //   this.initChartYqfxYdqszxt(data.line);
        //   this.initChartYqfxWgztqk(data.gridBar);
        //   this.initYqfxSsgdgdlb(data.list);
        //   this.initChartYqfxLytj(data.typeBar);
        // });
      },
      initChartYqfxYdqszxt: function (orginData) {
        var data = JSON.parse(JSON.stringify(orginData));
        data.forEach((n) => {
          var month = parseInt(n.month.split('-')[1]);
          n.month = month + '月';
        });
        var sourceData = [];
        data.forEach((n) => {
          sourceData.push(
            {name: '敏感', month: n.month, value: parseInt(n.value.split(',')[0])}
          );
          sourceData.push(
            {name: '非敏感', month: n.month, value: parseInt(n.value.split(',')[1])}
          );
        });
        var chart = new G2.Chart({
          container: 'chart-yqfx-ydqszxt',
          width: 880,
          height: 375,
          forceFit: true,
          padding: [20, 20, 90, 80]
        });
        chart.source(sourceData, {
          month: {
            type: 'cat',
            tickInterval: 50,
            range: [ 0, 1 ]
          }
        });
        chart.tooltip({
          crosshairs: {
            type: 'line'
          }
        });
        chart.axis('month', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#0e5c9e'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#0e5c9e',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.axis('value', {
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
            lineWidth: 2,
            stroke: '#0e5c9e',
            lineDash: [1, 0]
            }
          }
        });
        chart.legend(false);
        // ['l(90) 0:#18ebe0 1:#0584ef', 'l(90) 0:#5534d4 1:#00ff00']#9877f6   #6ff6fb
        chart.areaStack().position('month*value').shape('smooth').color('name', ['#9877f6', '#6ff6fb']).opacity(0.8);
        chart.lineStack().position('month*value').shape('smooth').color('name', ['#9877f6', '#6ff6fb']).opacity(1).size(1);
        chart.render();
      },
      initYqfxSsgdgdlb: function (data) {
        var vm = this;
        data.forEach(n => {
          n.date = vm.$Util.getFmtDate(new Date());
        });
        this.yqfxSSgdgllb = data;
      },
      initChartYqfxWgztqk: function (data) {
        var vm = this;
        var chart = new G2.Chart({
          container: 'chart-wqfx-wgztqk',
          width: 880,
          height: 375,
          padding: [0, 10, 150, 10]
        });
        chart.source(data);
        chart.scale('value', { alias: '舆情', tickInterval: 20 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 18,
              lineHeight: 18,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.axis('value', false);
        var maxValue = Math.max.apply(null, data.map(n => n.value));
        chart.interval().position('name*value').size(35).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        }).label('value', function (v) {
          let highValue = v / maxValue > 0.95;
          return highValue ? {
            offset: -15,
            textStyle: {
              fill: '#f00',
              fontSize: 16
            }
          } : {
            offset: 10,
            textStyle: {
              fill: '#fff',
              fontSize: 16
            }
          };
        });
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var param = {
              gridId: origin.id,
              ptitle: '舆情信息-网格总体情况'
            };
            vm.openLayuiWindow('/datav/list/yq/index.jsp', param);
          }
        });
        chart.render();
      },
      initChartYqfxLytj: function (data) {
        var vm = this;
        var chart = new G2.Chart({
          container: 'chart-yqfx-lytj',
          forceFit: true,
          width: 880,
          height: 420,
          padding: [60, 20, 160, 30]
        });
        chart.source(data);
        chart.legend(false);
        chart.scale('value', { alias: '数量' });
        chart.tooltip({showTitle: false});
        chart.axis('value', {
          label: null,
          grid: {
            lineStyle: {
            lineWidth: 2,
            stroke: '#0e5c9e',
            lineDash: [1, 0]
            }
          }
        });
        chart.axis('name', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#0e5c9e'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            rotate: -30,
            offset: [-25, 60]
          }
        });
        chart.interval().position('name*value').color('name', G2.Global.colors).label('value', {
          textStyle: {
            fill: '#c5a014',
            fontSize: 26
          }
        });
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var param = {
              sourceId: origin.id,
              ptitle: '舆情信息来源统计'
            };
            vm.openLayuiWindow('/datav/list/yq/index.jsp', param);
          }
        });
        chart.render();
      },
      initJjyxfx: function () {
        //
      },
      clearFeatures: function (f1 = 1, f2 = 1, f3 = 1) {
        if (f1) {
          this.map.removeFeature('FeatureCollection');
        }
        if (f2) {
          this.map.removeFeature('Feature');
        }
        if (f3) {
          this.map.removeFeature('Terminal');
        }
      },
      addFeatureV1: function () {
        var vm = this;
        var map = vm.map;
        vm.addOuterPolygon(boundaryData.features);
        boundaryData.features.forEach(feature => {
          map.add3DBoundaryByFeatureV2(feature, '#0d2e56', 0.58, 2500, [3, 20], function () {
            map.setCenterAndZoom(feature.properties.cp, vm.$Config.ZOOM_2);
            // 清除其他网格
            vm.clearFeatures();
            // 更新面包线
            var wgTree = vm.wgTree.slice(0, 1);
            wgTree.push({
              name: feature.properties.name,
              type: 'Feature',
              id: feature.id,
              cp: feature.properties.cp
            });
            vm.wgTree = wgTree;
            vm.$Util.toggleAttr(vm.towns, (n) => {
              if (n.spaceName == feature.properties.name) {
                vm.spaceId = n.spaceId;
                return true;
              } else {
                return false;
              }
            });
            vm.showTownSelector = false;
            vm.currentGirdNo = feature.id;
            if (feature.features.length) {
              // 显示二级网格 （村里面的网格 临时网格）
              vm.addOuterPolygon(feature.features);
              feature.features.forEach(vm.addFeatureV2);
            } else {
              vm.addOuterPolygon(feature);
              map.add3DBoundaryByFeatureV2(feature, '#1ac9ff', 0.3, 1600, [3, 20], '', 'Terminal');
            }
          }, 'FeatureCollection');
        });
      },
      // 地图相关
      initMap: function () {
        var vm = this;
        var isNy = location.href.includes('bh.html');
        var mapType = vm.$route.query.map || (isNy ? 'tian' : 'gaode');
        var Construter = {gaode: LwMap, tian: LwMap84}[mapType];
        var map = new Construter('map-container', vm.$Config.WGH_MAP_CENTER, [vm.$Config.WGH_MAP_ZOOM, 3, 20], {
          pitch: vm.$Config.WGH_MAP_PITCH,
          rotation: vm.$Config.WGH_MAP_ROTATION,
          viewMode: '3D'
        });

        vm.map = map;
        Promise.all([map.loadPromise, vm.getBoundaryData()]).then(function (dataList) {
          // console.log('xxxxxxxxxxxxxxxxxxxxxxxxsssssssss');
          boundaryData = dataList[1];
          var townIndex = vm.towns.findIndex(n => n.spaceId == vm.spaceId);
          vm.handlerAreaChange(vm.towns[townIndex], townIndex);
          // townIndex ? vm.handlerAreaChange(vm.towns[townIndex], townIndex) : vm.addFeatureV1();
          vm.rotationAndPitch = vm.map.getRotationAndPitch();

          var script = document.createElement('script');
          script.innerHTML =
            `
            function openFrame (src) {
              window.layer.open({
                closeBtn: true,
                type: 2,
                title: false,
                  shadeClose: false,
                  shade: 0,
                  skin: 'layerSkin',
                  area: ['90%', '920px'],
                  content: [src, 'no']
                }
              );
            }`;
          vm.$refs.wghmap.append(script);
        });
        return map.loadPromise;
      },
      getBoundaryData: function () {
        var vm = this;
        return new Promise((resolve, reject) => {
          vm.$http('./static/json/mapJSON.json').then(function (res) {
            if (res.data) {
              resolve(res.data);
            } else {
              console.error(`获取边界失败`);
              reject(new Error());
            }
          });
        });
      },
      addFeatureV2: function (fl2) {
        var vm = this;
        var map = vm.map;
        map.add3DBoundaryByFeatureV2(fl2, '#3831fa', 0.5, 1000, [3, 20], function () {
          map.setCenterAndZoom(fl2.properties.cp, vm.$Config.ZOOM_3);
          vm.clearFeatures();
          vm.currentGirdNo = fl2.id;
          var wgTree = vm.wgTree.slice(0, 2);
          wgTree.push({
            name: fl2.properties.name,
            type: 'Terminal',
            id: fl2.id,
            cp: fl2.properties.cp,
            features: fl2.features
          });
          vm.wgTree = wgTree;
          if (fl2.features && fl2.features.length) {
            // 显示二级网格 （村里面的网格 临时网格）
            vm.addOuterPolygon(fl2.features);
            fl2.features.forEach(vm.addFeatureV3);
          } else {
            vm.addOuterPolygon(fl2);
            map.add3DBoundaryByFeatureV2(fl2, '#1ac9ff', 0.3, 1600, [3, 20], '', 'Terminal');
          }
          // 显示网格下的内容
          vm.showGridDetail();
        });
      },
      addFeatureV3: function (fl3) {
        var vm = this;
        var map = vm.map;
        map.add3DBoundaryByFeatureV2(fl3, '#3831fa', 0.5, 1000, [3, 20], function () {
          map.setCenterAndZoom(fl3.properties.cp, vm.$Config.ZOOM_3 + 1);
          vm.clearFeatures();
          vm.currentGirdNo = fl3.id;
          var wgTree = vm.wgTree.slice(0, 3);
          wgTree.push({
            name: fl3.properties.name,
            type: 'Terminal',
            id: fl3.id,
            cp: fl3.properties.cp
          });
          vm.wgTree = wgTree;
          vm.addOuterPolygon(fl3);
          map.add3DBoundaryByFeatureV2(fl3, '#1ac9ff', 0.3, 1600, [3, 20], '', 'Terminal'); // 增加顶级网格 type="termial"

          // 显示网格下的内容
          vm.showGridDetail();
        });
      },
      showGridDetail: function () {},
      getAndLoadEventInfo: function (data) {
        var vm = this;
        vm.eventInfo.stat = data.stat;
        vm.eventInfo.list = data.list;
      }
    },
    mounted: function () {
      var vm = this;
      vm.$db.set('userId', vm.userId);
      vm.$db.set('spaceId', vm.spaceId);
      vm.$http((process.env.NODE_ENV == "production" ? '/' : '') + 'api/yth/homePage/city_area.jsp?userId=' + vm.userId).then(function (res) {
        vm.topSpaceId = res.data.topSpaceId;
        !vm.spaceId && (vm.spaceId = vm.topSpaceId);
        vm.topSpaceName = res.data.topSpaceName;
        vm.wgTree[0].name = vm.topSpaceName;
        if (res.data.code == 2) {
          vm.towns.push({
            active: true,
            spaceId: res.data.thisSpaceId,
            spaceName: res.data.thisSpaceName
          });
          vm.userCode = 2;
          vm.spaceId = res.data.thisSpaceId;
          vm.topSpaceName = res.data.thisSpaceName;
        } else if (res.data.data) {
          // console.log(JSON.stringify(
          //   res.data.data.map(function (n) {
          //     return {
          //       name: n.spaceName,
          //       value: parseInt(Math.random() * 8000),
          //       id: n.spaceId
          //     };
          //   }))
          // );
          vm.towns.push({
            active: false,
            spaceId: res.data.thisSpaceId,
            spaceName: res.data.thisSpaceName
          });
          res.data.data.forEach(n => {
            n.active = n.spaceId == vm.spaceId;
            vm.towns.push(n);
          });
        }
        vm.initMap().then(() => {
          // console.log('xxxxxxxxxxxxxxxxxxxxxxxx');
          // vm.getAndLoad('标注点信息', 'api/v1/wgh/getGridElements.jsp?gridId=' + vm.currentGirdNo, vm.initActivityInfo, {showElements: false});
          vm.getAndLoad('事件列表', 'api/yth/wgh/getEventCount.jsp', vm.getAndLoadEventInfo);
          vm.handleMapOptions(0); // 人
        });
      });
      layui.use(['layer'], function () {
        window.layer = layui.layer;
        window.$wgh = vm;
      });
    },
    computed: {
      currentAreaName: function () {
        if (this.wgTree.length == 1) {
          return this.topSpaceName;
        } else {
          return this.wgTree[1].name;
        }
      }
    },
    watch: {
      currentGirdNo: function (newGirdNo) {
        var vm = this;
        // 网格变化之后 层级发生了改变
        vm.mapMenuOptions.forEach(n => {
          n.loaded = false;
        });
        vm.showMenuDetails != 6 && vm.handleMapOptions(vm.showMenuDetails - 1);
      }
    },
    destroyed: function () {
    }
  };
</script>

<style lang="scss">
</style>
